Перехоплення подій у React Portal: міжпортальне перехоплення подій

React Portals пропонують потужний механізм для рендерингу дочірніх елементів у DOM-вузол, що існує поза ієрархією DOM батьківського компонента. Це особливо корисно для модальних вікон, підказок та інших елементів інтерфейсу, яким потрібно вийти за межі батьківських контейнерів. Однак це також створює складнощі при роботі з подіями, особливо коли потрібно перехопити або захопити події, що виникають у порталі, але призначені для елементів поза ним. У цій статті розглядаються ці складнощі та пропонуються практичні рішення для досягнення міжпортального перехоплення подій.

Розуміння React Portals

Перш ніж зануритися у захоплення подій, давайте сформуємо чітке розуміння React Portals. Портал дозволяє рендерити дочірній компонент в іншу частину DOM. Уявіть, що у вас є глибоко вкладений компонент, і ви хочете відобразити модальне вікно безпосередньо під елементом `body`. Без порталу модальне вікно підпадало б під стилізацію та позиціонування своїх предків, що потенційно могло б призвести до проблем з макетом. Портал обходить це, розміщуючи модальне вікно саме там, де ви хочете.

Базовий синтаксис для створення порталу:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Тут `child` — це елемент (або компонент) React, який ви хочете відрендерити, а `domNode` — це DOM-вузол, де ви хочете його відрендерити.

Приклад:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Handle case where modal-root doesn't exist

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

У цьому прикладі компонент `Modal` рендерить своїх дочірніх елементів у DOM-вузол з ID `modal-root`. Обробник `onClick` на `.modal-overlay` дозволяє закрити модальне вікно при кліку поза його вмістом, тоді як `e.stopPropagation()` запобігає закриттю модального вікна при кліку на вміст.

Виклик обробки подій між порталами

Хоча портали вирішують проблеми з макетом, вони створюють труднощі при роботі з подіями. Зокрема, стандартний механізм спливання подій у DOM може поводитися неочікувано, коли події виникають усередині порталу.

Сценарій: Розглянемо сценарій, де у вас є кнопка всередині порталу, і ви хочете відстежувати кліки на цю кнопку з компонента, що знаходиться вище в дереві React (але *поза* місцем рендерингу порталу). Оскільки портал розриває ієрархію DOM, подія може не спливти до очікуваного батьківського компонента в дереві React.

Ключові проблеми:

• Спливання подій: Події поширюються вгору по дереву DOM, але портал створює розрив у цьому дереві. Подія спливає вгору по ієрархії DOM *всередині* цільового вузла порталу, але не обов'язково назад до компонента React, який створив портал.
• `stopPropagation()`: Хоча цей метод корисний у багатьох випадках, безрозсудне використання `stopPropagation()` може перешкодити подіям досягти необхідних слухачів, у тому числі тих, що знаходяться поза порталом.
• Ціль події: Властивість `event.target` все ще вказує на DOM-елемент, де виникла подія, навіть якщо цей елемент знаходиться всередині порталу.

Стратегії міжпортального перехоплення подій

Можна застосувати кілька стратегій для обробки подій, що виникають у порталах і досягають компонентів поза ними:

1. Делегування подій

Делегування подій полягає у прикріпленні одного слухача подій до батьківського елемента (часто це документ або спільний предок), а потім визначенні фактичної цілі події. Цей підхід дозволяє уникнути прикріплення численних слухачів подій до окремих елементів, покращуючи продуктивність та спрощуючи управління подіями.

Як це працює:

1. Прикріпіть слухача подій до спільного предка (наприклад, `document.body`).
2. У слухачі подій перевірте властивість `event.target`, щоб визначити елемент, який викликав подію.
3. Виконайте бажану дію на основі цілі події.

Приклад:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Perform actions based on the clicked button
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

У цьому прикладі `PortalAwareComponent` прикріплює слухача кліків до `document.body`. Слухач перевіряє, чи має елемент, на який клікнули, клас `portal-button`. Якщо так, він виводить повідомлення в консоль і виконує будь-які інші необхідні дії. Цей підхід працює незалежно від того, чи знаходиться кнопка всередині або поза порталом.

Переваги:

• Продуктивність: Зменшує кількість слухачів подій.
• Простота: Централізує логіку обробки подій.
• Гнучкість: Легко обробляє події від динамічно доданих елементів.

Що варто врахувати:

• Специфічність: Вимагає ретельного націлювання на джерела подій за допомогою `event.target` і, можливо, переміщення вгору по дереву DOM за допомогою `event.target.closest()`.
• Тип події: Найкраще підходить для подій, які спливають.

2. Відправка користувацьких подій

Користувацькі події дозволяють створювати та відправляти події програмно. Це корисно, коли потрібно спілкуватися між компонентами, які не пов'язані безпосередньо в дереві React, або коли потрібно викликати події на основі власної логіки.

Як це працює:

1. Створіть новий об'єкт `Event` за допомогою конструктора `Event`.
2. Відправте подію за допомогою методу `dispatchEvent` на DOM-елементі.
3. Прослуховуйте користувацьку подію за допомогою `addEventListener`.

Приклад:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

У цьому прикладі, коли натискається кнопка всередині порталу, на `document` відправляється користувацька подія з назвою `portalButtonClick`. Компонент `PortalAwareComponent` прослуховує цю подію і виводить повідомлення в консоль.

Переваги:

• Гнучкість: Дозволяє спілкуватися між компонентами незалежно від їхнього положення в дереві React.
• Налаштовуваність: Ви можете включати власні дані у властивість `detail` події.
• Розв'язка: Зменшує залежності між компонентами.

Що варто врахувати:

• Іменування подій: Вибирайте унікальні та описові імена подій, щоб уникнути конфліктів.
• Серіалізація даних: Переконайтеся, що будь-які дані, включені у властивість `detail`, можна серіалізувати.
• Глобальна область видимості: Події, відправлені на `document`, доступні глобально, що може бути як перевагою, так і потенційним недоліком.

3. Використання рефів та прямої маніпуляції DOM (використовувати з обережністю)

Хоча в розробці на React це, як правило, не рекомендується, прямий доступ та маніпуляція DOM за допомогою рефів іноді можуть бути необхідними для складних сценаріїв обробки подій. Однак важливо мінімізувати пряму маніпуляцію DOM і віддавати перевагу декларативному підходу React, коли це можливо.

Як це працює:

1. Створіть реф за допомогою `React.createRef()` або `useRef()`.
2. Прикріпіть реф до DOM-елемента всередині порталу.
3. Отримайте доступ до DOM-елемента за допомогою `ref.current`.
4. Прикріпіть слухачів подій безпосередньо до DOM-елемента.

Приклад:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

У цьому прикладі реф прикріплюється до кнопки всередині порталу. Потім слухач подій прикріплюється безпосередньо до DOM-елемента кнопки за допомогою `buttonRef.current.addEventListener()`. Цей підхід обходить систему подій React і надає прямий контроль над обробкою подій.

Переваги:

• Прямий контроль: Надає детальний контроль над обробкою подій.
• Обхід системи подій React: Може бути корисним у специфічних випадках, коли системи подій React недостатньо.

Що варто врахувати:

• Потенціал для конфліктів: Може призвести до конфліктів із системою подій React, якщо не використовувати обережно.
• Складність підтримки: Робить код важчим для підтримки та розуміння.
• Анти-патерн: Часто вважається анти-патерном у розробці на React. Використовуйте помірно і лише за крайньої необхідності.

4. Використання спільного рішення для управління станом (наприклад, Redux, Zustand, Context API)

Якщо компонентам всередині та поза порталом потрібно ділитися станом і реагувати на ті самі події, спільне рішення для управління станом може бути чистим та ефективним підходом.

Як це працює:

1. Створіть спільний стан за допомогою Redux, Zustand або React Context API.
2. Компоненти всередині порталу можуть відправляти дії або оновлювати спільний стан.
3. Компоненти поза порталом можуть підписуватися на спільний стан і реагувати на зміни.

Приклад (з використанням React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

У цьому прикладі `EventContext` надає спільний стан (`buttonClicked`) та обробник (`handleButtonClick`). Компонент `PortalContent` викликає `handleButtonClick` при натисканні кнопки, а компонент `PortalAwareComponent` підписується на стан `buttonClicked` і перерендериться при його зміні.

Переваги:

• Централізоване управління станом: Спрощує управління станом та комунікацію між компонентами.
• Передбачуваний потік даних: Забезпечує чіткий та передбачуваний потік даних.
• Тестованість: Робить код легшим для тестування.

Що варто врахувати:

• Накладні витрати: Додавання рішення для управління станом може спричинити накладні витрати, особливо для простих додатків.
• Крива навчання: Вимагає вивчення та розуміння обраної бібліотеки або API для управління станом.

Найкращі практики для обробки подій між порталами

При роботі з обробкою подій між порталами враховуйте наступні найкращі практики:

• Мінімізуйте пряму маніпуляцію DOM: Віддавайте перевагу декларативному підходу React, коли це можливо. Уникайте прямої маніпуляції DOM, якщо це не є абсолютно необхідним.
• Використовуйте делегування подій розумно: Делегування подій може бути потужним інструментом, але переконайтеся, що ви ретельно націлюєтесь на джерела подій.
• Розгляньте користувацькі події: Користувацькі події можуть забезпечити гнучкий та розв'язаний спосіб комунікації між компонентами.
• Вибирайте правильне рішення для управління станом: Якщо компонентам потрібно ділитися станом, вибирайте рішення для управління станом, яке відповідає складності вашого додатка.
• Ретельне тестування: Ретельно тестуйте логіку обробки подій, щоб переконатися, що вона працює як очікувано у всіх сценаріях. Звертайте особливу увагу на крайні випадки та потенційні конфлікти з іншими слухачами подій.
• Документуйте свій код: Чітко документуйте логіку обробки подій, особливо при використанні складних технік або прямої маніпуляції DOM.

Висновок

React Portals пропонують потужний спосіб керування елементами інтерфейсу, яким потрібно вийти за межі своїх батьківських компонентів. Однак обробка подій між порталами вимагає ретельного розгляду та застосування відповідних технік. Розуміючи виклики та використовуючи стратегії, такі як делегування подій, користувацькі події та спільне управління станом, ви можете ефективно перехоплювати та захоплювати події, що виникають у порталах, і гарантувати, що ваш додаток поводиться як очікувалося. Пам'ятайте про пріоритетність декларативного підходу React та мінімізацію прямої маніпуляції DOM для підтримки чистого, підтримуваного та тестованого коду.